<template>
  <el-menu :default-openeds="['1', '2']">
    <el-sub-menu index="1">
      <template #title
        ><el-icon><View /></el-icon>全景监控</template
      >
      <el-menu-item-group>
        <el-menu-item index="1-1" @click="PipCheck"
          ><el-icon><Odometer /></el-icon>监控仪表盘</el-menu-item
        >
        <el-menu-item index="1-2" @click="PipCheck"
          ><el-icon><Download /></el-icon>水井管柱监控</el-menu-item
        >
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title
        ><el-icon><Search /></el-icon>数据查询</template
      >
      <el-menu-item-group>
        <el-menu-item index="2-1" @click="solowellquery"
          ><el-icon><TrendCharts /></el-icon>单井信息</el-menu-item
        >
        <el-menu-item index="2-2" @click="WellhistoryQuery"
          ><el-icon><Notebook /></el-icon>井史查询</el-menu-item
        >
        <el-menu-item index="2-3" @click="sqlquery"
          ><el-icon><EditPen /></el-icon>SQL 查询</el-menu-item
        >

        <el-menu-item index="2-4" @click="undulatingblock"
          ><el-icon><Connection /></el-icon>稳升区块</el-menu-item
        >
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title
        ><el-icon><Plus /></el-icon>测试组件</template
      >
      <el-menu-item index="3-1" @click="RelativePerm">相渗曲线</el-menu-item>
      <el-menu-item index="3-2" @click="testcomponent">测试</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
export default {
  methods: {
    solowellquery: function () {
      this.$emit("newtab", {
        title: "单井查询",
        component: "SolowellQuery",
      });
    },
    PipCheck: function () {
      this.$emit("newtab", {
        title: "水井检管",
        component: "PipCheck",
      });
    },
    sqlquery: function () {
      this.$emit("newtab", { title: "SQL查询", component: "SqlQuery" });
    },
    undulatingblock: function () {
      this.$emit("newtab", {
        title: "稳升区块",
        component: "UndulatingBlock",
      });
    },
    WellhistoryQuery: function () {
      this.$emit("newtab", {
        title: "井史查询",
        component: "WellhistoryQuery",
      });
    },
    RelativePerm: function () {
      this.$emit("newtab", { title: "相渗曲线", component: "RelativePerm" });
    },
    testcomponent: function () {
      this.$emit("newtab", {
        title: "测试用",
        component: "TestComponent",
      });
    },
  },
};
</script>
